<template>
  <div class="home">
      <Header head-title="添加银行卡" go-back="true"></Header>
        <section class="group">
            <section class="Select CardApply">
                <p class="fonts">卡类型</p>
                <el-select v-model="value" placeholder="请选择">
                    <el-option class="Login" v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </section>
            <section class="Select CardApply">
                <p class="fonts">卡号</p>
                <input type="number" class="Back_input" placeholder="请输入储蓄卡号">
            </section>
        </section>
        <section class="group">
            <section class="Select CardApply">
                <p class="fonts">姓名</p>
                <input type="text" class="Back_input" placeholder="请输入姓名">
            </section>
             <section class="Select CardApply">
                <p class="fonts">身份证号</p>
                <input type="text" class="Back_input" placeholder="请输入身份证号">
            </section>
             <section class="Select CardApply">
                <p class="fonts">手机号</p>
                <input type="text" class="Back_input" placeholder="请输入银行留存手机号">
            </section>
            <section class="Select fa">
                <div @click="XieyiClick()" class="circleM" v-if="Xieyi"></div>
                <img @click="XieyiClick()" class="Xieyi" v-if="!Xieyi" src="../../../assets/img/Xieyi.png" alt="">
                <p class="activecolor fonts">《快捷支付服务协议》</p>
            </section>
        </section>

        <section class="group1">
            <el-button @click="VerifiPhone()" class="Login" type="primary">
                下一步
            </el-button>
        </section>

  </div>
</template>

<script>
import Header from '../../../components/Header'

export default {
  name: 'Home',
  data () {
    return {
      options: [
        { value: '1', label: '中国银行' },
        { value: '2', label: '工商银行' },
        { value: '3', label: '建设银行' },
        { value: '4', label: '中国邮政' },
        { value: '5', label: '平顶山银行' }
      ],
      value: '1',
      Xieyi: true
    }
  },
  components: {
    Header
  },
  methods: {
    XieyiClick () {
      this.Xieyi = !this.Xieyi
    },
    //  下一步
    VerifiPhone () {
      this.$router.push({
        path: '/WalletPhone'
      })
    }
  }
}
</script>

<style scoped>
.home {
    background: none;
}
.fa {
    justify-content:inherit;
    padding: 0.3rem 0;
}
.circleM {
    border: 0.02rem solid #aaa;
    width: 0.28rem;
    height: 0.28rem;
    border-radius: 0.1rem;
}

</style>
